<template>
  <div class="text-verify">
    <div class="verify-box verify-fill">
      <el-input v-model="result.answer" type="text" placeholder="请输入验证码" @keyup.enter="handleLogin"/>
      <img :src="'data:image/png;base64,' + picCaptcha" alt="" class="captcha" @click="getPicCaptcha">
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { getVerificationImage, humanVerify } from '@/api/verify'

const emits = defineEmits(['handleLogin'])
const props = defineProps({
  type: {
    type: Number,
    default: 0
  }
})

const type = computed(() => props.type)

const result = reactive({
  answer: '',
  type: props.type
})
// 获取验证码
const picCaptcha = ref('')
const getPicCaptcha = async () => {
  const res = await getVerificationImage({ type: type.value })
  if (res.code === 20000) {
    if (type.value === 0) {
      picCaptcha.value = res.data.charImage
    } else if (type.value === 1) {
      picCaptcha.value = res.data.operationImage
    }
  }
}
// 提交验证码
const submitVerify = async () => {
  const res = await humanVerify(result)
  return res.data
}
const handleLogin = () => {
  emits('handleLogin')
}
onMounted(() => {
  getPicCaptcha()
})
defineExpose({ submitVerify })
</script>

<style lang='scss' scoped>
.text-verify{
  width: 100%;
  .verify-fill{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    ::v-deep .el-input{
      flex: 1;
      height: 48px;
    }
    .captcha{
      width: 120px;
      height: 48px;
      margin-left: 5px;
    }
  }
}
</style>